<style lang="scss" scoped="">
	@import '../style.scss';


</style>
<template>
	<div class='my_card_outer' style="height:25vh">
		<div class='my_card' style="height:24vh;">
			<div class="my_card_title">
				<Icon type="md-stats" color='rgb(67,158,279)' class="my_card_icon" />各类租户健康度
			</div>
			<div style="height:19vh" ref="myEchart">

			</div>
		</div>

	</div>

</template>

<script>
	//各类型租户的健康度
	import echarts from 'echarts'
  import config from '../config.js'
	export default {
		name: 'tenant_type_detail_score',
		mounted() {
			// this.initChart();

		},
		methods: {
			initChart(input) {
				let hv = document.body.clientHeight / 100;
				var myChart = echarts.init(this.$refs.myEchart);
				let input_data = input.tenant_type_score
				let data=[]
				for(var i in input_data){
					data.push([Math.round(input_data[i]["health"]),Math.round(input_data[i]["object_score"]),Math.round(input_data[i]["subject_score"])])
				}
				var option = getOption();
				option.series[0]['data'] = data[0];
				option.series[1]['data'] = data[1];
				option.series[2]['data'] = data[2];
				myChart.setOption(option, true);
			}
		},

	}


	function getOption() {
		let hv = document.body.clientHeight / 100;
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},

			grid: {
				show: false,
				left: '3%',
				right: '4%',
				bottom: '2%',
				top: '4%',
				containLabel: true
			},
			xAxis: [{
				type: 'category',

				data: ['健康度', '客观评分', '专家评分'],
				axisLabel: {
					color: "#FFF",
					fontSize: hv * 1.5
				},
			}],
			yAxis: [{
				type: 'value',
				axisTick: {
					show: false
				},
				splitLine: false,
				axisLabel: {
					color: '#FFF',
					fontSize: 1.5 * hv
				},
				axisLine: {
					lineStyle: {
						color: '#FFF'
					}
				}

			}],
			series: [{
					name: '省级租户',
					type: 'bar',
					stack: 'barbar',

					itemStyle: {
						color: 'rgb(67,158,255)'
					},
					data: [86, 67, 57]
				},
				{
					name: '合作伙伴',
					type: 'bar',

					itemStyle: {
						color:config.color[0]
					},
					data: [81, 77, 77]
				},
				{
					name: '专业公司',
					type: 'bar',

					itemStyle: {
						color:config.color[1]
					},
					barWidth: '20%',
					data: [86, 64, 87]
				}
			]
		};
		return option;

	}
</script>
